<template>
  <el-dialog
    v-model="dialogFormVisible"
    :title="form.id?'编辑公告':'新增公告'"
    width="1000px"
    :append-to-body="true"
    :destroy-on-close="true"
    :before-close="onCancel"
    :close-on-press-escape="false"
    :lock-scroll="true"
  >
    <template #default>
      <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="90px"
        class="el-form"
      >
        <el-form-item label="公告标题" prop="title">
          <el-input v-model="form.title" placeholder="请输入公告标题" />
        </el-form-item>

        <el-form-item label="公告类型" prop="type" class="inline">
          <el-select v-model="form.type" placeholder="请选择公告类型">
            <el-option
              v-for="item in dicts.system_notice_type"
              :key="item.v"
              :label="item.k"
              :value="form.type==item.v?form.type:item.v"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="状态" prop="enabled" class="inline">
          <el-radio-group v-model="form.enabled">
            <el-radio
              v-for="item in dicts.system_global_status"
              :key="item.v"
              :label="form.enabled==item.v?form.enabled:item.v "
              :value="item.v"
            >
              {{ item.k }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="公告内容" prop="content">
          <wang-editor
            @onChange="onContentChange"
            v-model="form.content"
            ref="wangEditor"
          />
        </el-form-item>
      </el-form>
    </template>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="onCancel">取消</el-button>
        <el-button type="primary" @click="onSubmit"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import WangEditor from './wangEditor.vue'
export default {
  name: "NoticeEditorDialog",
  components:{ WangEditor },
  dicts: ['system_global_status','system_notice_type'],
  data() {
    return{
      dialogFormVisible:false,
      mode:'',
      form: {
        id: '',
        title: '',
        type: null,
        content: '',
        enabled: '1'
      },
      noticeId:'',
      rules:{
        title: [
          { required: true, message: '请输入公告标题', trigger: 'blur' },
          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请选择公告类型', trigger: 'change' }
        ],
        content: [
          { required: true, message: '请输入公告内容', trigger: 'blur' }
        ]
      }
    }
  },
  methods:{
    //setData
    setData(id){
      if(id){
        this.form.id = id
        this.getNoticeDetail()
      }
    },
    open(mode='edit'){
      this.mode = mode
      this.dialogFormVisible = true
      return this
    },
    // 获取详情
    async getNoticeDetail(){
      let res = await this.$API.system.notice.detail.get(this.form.id)
      this.form = res.data
    },
    onCancel(){
      this.form = {} // 清空
      this.dialogFormVisible = false
    },
    onContentChange(value) {
      this.form.content = value
    },
    async onSubmit(){
      try {
        await this.$refs.formRef.validate()
        if (this.mode =='edit') {
          //编辑
          await this.$API.system.notice.update.post(this.form)
        } else {
          // 新增
          await this.$API.system.notice.add.post(this.form)
        }
        this.form = {} //清空
        this.$message.success('操作成功')
        this.$emit('confirm')
        this.dialogFormVisible = false // 关闭弹窗
      } catch (error) {
        console.error(error)
        this.$message.error('操作失败')
      }
    }

  }
}
</script>

<style scoped>

</style>
